<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  get:{{get_result}}<br/>
  <hr/>
  姓名：<input v-model="name"/><br/>
  性别：<input v-model="gender"/><br/>
  <button @click="axiosGet1">get请求1</button>
  <button @click="axiosGet2">get请求2</button>
  <br/>
  <button @click="axiosPost">post请求</button>
  <br/>
  <button @click="axiosPut">put请求</button>
  <br/>
  <button @click="axiosDelete">delete请求</button>
  <hr/>
  <button @click="two">批量请求</button>
  <br/>
  <button @click="errorAxios">错误请求</button>
</div>
</body>
</html>
<script src="../js/vue.min.js"></script>
<script src="../js/axios.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        get_result: '',
        name: '',
        gender: ''
      }
    },
    methods: {
      axiosGet1() {
        // 常用写法
        axios.get('../axios_request', {
          params: {
            name: this.name,
            gender: this.gender
          }
        }).then(response => {
          console.log(response)
          this.get_result = response.data
        })
      },
      axiosGet2() {
        axios({
          method: 'get',
          url: '../axios_request',
          params: {
            name: this.name,
            gender: this.gender
          }
        }).then(response => {
          this.get_result = response.data
        })
      },
      axiosPost() {
        // 将数据封装起来
        let data = new URLSearchParams()
        data.append('name', this.name)
        data.append('gender', this.gender)
        axios({
          method: 'post',
          url: '../axios_request',
          data: data
        }).then(response => {
          this.get_result = response.data
        })
      },
      axiosPut() {
        // 将数据封装起来
        axios({
          method: 'put',
          url: '../axios_request?name=' + this.name + '&gender=' + this.gender
        }).then(response => {
          this.get_result = response.data
        })
      },
      axiosDelete() {
        axios({
          method: 'delete',
          url: '../axios_request',
          params: {
            name: this.name,
            gender: this.gender
          }
        }).then(response => {
          this.get_result = response.data
        })
      },
      two() {
        let _this = this
        axios.all([axios.get('../axios1'), axios.get('../axios2')])
                .then(axios.spread(function (resp1, resp2) {
                  _this.name = resp1.data
                  _this.gender = resp2.data
                }))
      },
      errorAxios() {
        axios.get('../axios3')
                .then(response => {
                  alert(response.data);
                })
                .catch(e => {
                  alert(e);
                })
      }
    }
  })
</script>